<template>
  <basic-container>
    <basic-header title="新增/编辑轮播图">
      <el-button @click="$router.go(-1)">返回</el-button>
    </basic-header>
    <el-form :model="formData" ref="form" label-width="160px" class="detail-form" :rules="formRules" v-loading="loading">
      <el-form-item label="图片" prop="pictureUrl">
        <el-input v-model="formData.pictureUrl" v-show="false" style="width:1;height:1;z-index:-1;position:abslute" />
        <image-upload v-if="imageShow" :image.sync="formData.pictureUrl" :imageKey.sync="formData.pictureFileKey" :repeat="false" :accept="['jpg', 'png']" :putting.sync="uploading" />
      </el-form-item>
      <el-form-item label="描述" prop="body">
        <div class="detail-form-input">
          <el-input v-model="formData.body" type="textarea" maxlength="60" :show-word-limit="true" placeholder="请输入内容描述" :rows="4" />
        </div>
      </el-form-item>
      <el-form-item label="跳转地址" prop="productName">
        <div class="detail-form-input">
          <el-input :readonly="true" v-model="formData.productName" type="text" placeholder="请点击选择产品" />
        </div>
        <el-button class="choose-button" size="small" @click="routerToChoose">选择产品</el-button>
      </el-form-item>
      <el-form-item label="上架" prop="isPutAway">
        <div class="detail-form-input">
          <el-select v-model="formData.isPutAway" placeholder="请选择">
            <el-option :value="true" label="是" />
            <el-option :value="false" label="否" />
          </el-select>
        </div>
      </el-form-item>
      <el-form-item class="detail-form-bottom">
        <el-button @click="$router.go(-1)">取消</el-button>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </el-form-item>
    </el-form>
  </basic-container>
</template>
<script>
import ImageUpload from "@/components/Upload";
import { mapState, mapMutations, mapActions } from "vuex";
import detailMixin from "@/mixins/detail";
import { checkImage } from "@/const/detail/rules";
export default {
  name: "detail",
  components: { ImageUpload },
  mixins: [detailMixin],
  computed: {
    ...mapState("table", ["currentData"]),
    ...mapState("@@loading", {
      loading: state => state.effects["table/GetDetailData"]
    })
  },
  data() {
    return {
      formData: {},
      imageShow: false,
      formRules: {
        pictureUrl: [
          { required: true, validator: checkImage, trigger: "change" }
        ],
        body: [{ required: true, message: "描述不能为空", trigger: "blur" }],
        productId: [
          { required: true, message: "跳转商品不能为空", trigger: "blur" }
        ],
        isPutAway: [
          { required: true, message: "请选择是否上架", trigger: "change" }
        ]
      },
      uploading: ""
    };
  },
  beforeRouteEnter(to, form, next) {
    if (form.path !== "/wel/choose" && to.query.type === "edit") {
      const { action, id } = to.query;
      return next(async vm => {
        await vm.GetDetailData({ action, id });
        vm.initData();
      });
    }
    next(vm => vm.initData());
  },
  methods: {
    ...mapMutations({
      setCurrentData: "table/SET_CURRENT_DATA"
    }),
    ...mapActions({
      GetDetailData: "table/GetDetailData",
      saveDetailData: "table/saveDetailData"
    }),
    initData() {
      const { type, action } = this.$route.query;
      this.formData = { ...this.currentData };
      this.formData.productName =
        this.formData.productDTO && this.formData.productDTO.productName;
      this.action = action;
      this.detailType = type;
      this.imageShow = true;
    },
    submitForm() {
      if (this.uploading && this.uploading !== "") {
        this.$message({
          type: "warning",
          message: this.uploading
        });
        return;
      }
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.saveDetailData({ action: this.action, formData: this.formData })
            .then(() => {
              this.$message({
                type: "success",
                message: this.detailType === "add" ? "添加成功" : "修改成功"
              });
              setTimeout(() => this.$router.go(-1), 1500);
            })
            .catch(error => {
              this.$message({
                type: "error",
                message: error.message || String(error)
              });
            });
        }
      });
    },
    routerToChoose() {
      if (this.uploading && this.uploading !== "") {
        this.$message({
          type: "warning",
          message: this.uploading
        });
        return;
      }
      this.setCurrentData(this.formData);
      this.$router.push("/wel/choose");
    }
  }
};
</script>
<style lang="scss" scoped>
.choose-button {
  margin-left: 14px;
}
</style>

